<ion-header>
    <ion-toolbar content-page>
        <ion-buttons start>
            <button ion-button icon-only (click)="backToLastPage($event)">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            {{currentProcess.title}}
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>

    <div class="search-wrapper">
        <div>
            <div class="search-container">
                <input type="text" [(ngModel)]="keyword" placeholder='姓名/电话'
                       (keyup)="searchKeyUp($event)">
                <i (click)="searchClickHandle($event)"></i>
            </div>
            <div class="filter" (click)="filterClicked()">
                <img src="./assets/images/add-staff-list/staffFilterButton.png" alt="">
            </div>
        </div>
        <div class="word">
            <div *ngFor="let item of filterMenues">
                <div (click)="menuClick(item)"
                     [class]="item.className"
                     [ngClass]="{'effective':item.effective,'sort-way1':item.sortWay === 1,'sort-way2':item.sortWay === 2}">

                    <div *ngFor="let nItem of item.names">{{nItem}}</div>
                    <img class="arrw" [ngClass]="{'show':item.sortWay}" *ngIf="item.effective"
                         [src]="item.sortWay === 1?'./assets/images/add-staff/icon_up.png':item.sortWay === 2?'./assets/images/add-staff/icon_down.png':''"
                         alt="">
                </div>
            </div>
        </div>
    </div>

    <div class="list-container">
        <img class="shadow top" src="./assets/images/add-staff-list/talent-pool-list-top.png" alt="top">

        <endless-list #endlessList [containerStyle]="listStyle" [dataSources]="currentScreenData"
                      (scrollToBottom)="scrollToBottom()" [isLoaded]="isLoaded">

            <ng-template let-item>
                <div class="item-wrapper">
                    <img *ngIf="item.isNew" class="is-new" src="./assets/images/add-staff-list/talent-is-new.png"
                         alt="">
                    <div class="client" (click)="goDetail(item)">
                        <div [ngClass]="{'is-overflow':item.nameOverflow}">
                            {{item.name}}
                        </div>
                        <div>
                            <img src="./assets/images/add-staff-list/unknown_s.png"
                                 *ngIf="item.sex !== 'F' && item.sex !== 'M'"
                                 alt="avantor">
                            <img src="./assets/images/add-staff-list/man_s.png"
                                 *ngIf="item.sex === 'M'"
                                 alt="avantor">
                            <img src="./assets/images/add-staff-list/woman_s.png"
                                 *ngIf="item.sex === 'F'"
                                 alt="avantor">
                            <span *ngIf="item.age!=null">
                            {{ item.age }}岁
                            </span>
                        </div>

                    </div>

                    <div class="activity">
                        <div class="source">
                            {{sourceMap(item.source)}}
                        </div>
                    </div>
                    <div class="activity create-time">
                        <div class="date">
                            {{item.createTime}}
                        </div>
                    </div>

                    <div class="type">{{processMap(item.latestProcess > item.process?item.latestProcess:item.process)}}</div>

                    <div class="operator">
                        <img *ngIf="item.mobileList&& item.mobileList.length" (click)="callPhone(item)" class="call"
                             src="./assets/images/add-staff-list/call.png" alt="call">
                        <img *ngIf="!item.mobileList || !item.mobileList.length" class="call"
                             src="./assets/images/add-staff-list/call_disabled.png" alt="call">
                    </div>

                </div>
            </ng-template>

        </endless-list>

        <img class="shadow bottom" src="./assets/images/add-staff-list/talent-pool-list-bottom.png" alt="bottom">

        <ion-select class="phone-list" *ngIf="currentCallClient" interface="action-sheet"
                    cancelText="取消" #phoneSelector>
            <ion-option *ngFor="let one of currentCallClient.mobileList"
                        (ionSelect)="callPhone({mobileList:[one]})">
                {{one}}
            </ion-option>
        </ion-select>

    </div>
</ion-content>

<ion-footer>
    <div class="footer-container">
        <div (click)="goAddIncrease($event)">
            <div>
                <img src="./assets/images/add-staff-list/add.png" alt="add">
                &nbsp;
                <span>添加候选人</span>
            </div>
        </div>
    </div>
</ion-footer>
